<template>
  <!-- <div class="footer">
    <van-tabbar v-model="active">
      <van-tabbar-item
        :route="true"
        :to="item.href"
        v-for="(item, index) in list"
        :icon="index === active ? item.url : item.url1"
        :key="item.href"
        >{{ item.title }}
      </van-tabbar-item>
    </van-tabbar>
  </div> -->

  <div class="footer">
    <router-link
      v-for="value in list"
      :to="value.href"
      :key="value.title"
      class="li"
      active-class="active"
    >
      <!-- <span class="img" v-if="active == value.id"><img :src="value.url"></span>
      <span class="img" v-else><img :src="value.url1"></span> -->
      <!-- <span class="img"><img :src="value.url1"></span> -->
      <span :class="value.iconclass"></span>
      <span class="title">{{ value.title }}</span>
    </router-link>
  </div>
</template>

<script>
import { ref, watch } from "vue";
import { useRoute } from "vue-router";

export default {
  setup() {
    const active = ref(0);
    let index = ref(0);
    const list = [
      {
        href: "/home/index",
        url: require("../assets/img/index1.png"),
        title: "首页",
        url1: require("../assets/img/index.png"),
        iconclass: "iconfont icon-shouye",
        id: 0,
      },
      {
        href: "/home/seeDoctor/杭州",
        url: require("../assets/img/seedoctor1.png"),
        title: "寻医",
        url1: require("../assets/img/seedoctor.png"),
        iconclass: "iconfont icon-jiahao",
        id: 1,
      },
      {
        href: "/home/healthNew",
        url: require("@/assets/img/healthnew1.png"),
        title: "健康头条",
        url1: require("@/assets/img/healthnew.png"),
        iconclass: "iconfont icon-huoyan",
        id: 2,
      },
      {
        href: "/home/healthMall",
        url: require("@/assets/img/healthmall1.png"),
        title: "健康商城",
        url1: require("@/assets/img/healthmall.png"),
        iconclass: "iconfont icon-a-shangcheng",
        id: 3,
      },
      {
        href: "/home/mine",
        url: require("@/assets/img/mine1.png"),
        title: "我的",
        url1: require("@/assets/img/mine.png"),
        iconclass: "iconfont icon----wode",
        id: 4,
      },
    ];
    // const active = ref(+sessionStorage.getItem("footid"));
    // watch(active, () => {
    //   sessionStorage.setItem("footid", active.value);
    // });

    const route = useRoute();
    // console.log(route.path);

    let path = ref(route.path);

    watch(path, (newvalue) => {
      if (
        newvalue === "/home/healthNew/doctorsay" ||
        newvalue === "/home/healthNew/recommend" ||
        newvalue === "/home/healthNew/broadcast"
      ) {
        console.log(list[2].href);
      }
    });

    const onChange = (index) => {
      console.log(index);
    };
    return {
      active,
      list,
      path,
      onChange,
      index,
    };
  },
};
</script>

<style lang="less">
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  // justify-content: center;
  height: 50px;
  background: white;
  width: 100%;

  a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgb(153, 151, 151);

    // .img {
    //   width: 25px;
    //   height: 25px;
    //   img {
    //     width: 100%;
    //     height: 100%;
    //   }
    // }
    .title {
      font-size: 12px;
    }

    // span{
    //   color: rgb(153, 151, 151);
    // }
  }

  .active {
    color: rgb(53, 53, 241);
  }
}
</style>
